<template>
    <div class="home">
        <el-card class="card">
            <search :fromLab="fromLab" @onadd="addbtn()" />
        </el-card>
        <el-card class="table">
            <xtable :tabData="tablelab" :tableData="tableData" :page="page" @onEdit="edit" @onCurrent="current">
                <template v-slot:sex="scope">
                    <!-- {{ scope }} -->
                    <el-tag v-if="scope.scope.sex == 0" class="ml-2" type="success">男</el-tag>
                    <el-tag v-else-if="scope.scope.sex == 1" class="ml-2" type="success">女</el-tag>
                    <el-tag v-else class="ml-2" type="success">未知</el-tag>
                </template>
                <template v-slot:locked="scope">
                    <!-- {{ scope }} -->
                    <el-tag v-if="scope.scope.locked == 0" class="ml-2" type="success">正常</el-tag>
                    <el-tag v-else-if="scope.scope.locked == 1" class="ml-2" type="success">锁定</el-tag>
                    <el-tag v-else class="ml-2" type="success">未知</el-tag>
                </template>

            </xtable>

        </el-card>
        <xdialog width="100px" ref="xdialogRef" :dialogLab="dialogLab" @formEmit="formEmit"></xdialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import search from '../../../components/search/search.vue'
import xtable from "../../../components/table/table.vue"
import { rolequeryAll, roleadd, roledelete, roleupdata } from '../../../service/index'
import { fromLab } from "./config/search"
import { tablelab } from './config/table';
import { dialogLab } from './config/dialog'
import xdialog from '../../../components/dialog/dialog.vue'

import { transTree } from "../../../ults/ults"
let tableData = ref([])
let page = reactive({
    limit: 10,
    offset: 1,
    count: 0
})
// 根据树形结构数据获取子节点的id
function childnode(data) {
    // console.log(data)
    let child = []
    data.forEach(item => {
        if (item.children && item.children.length > 0) {
            let arr = childnode(item.children)
            child = [...child,...arr]
        } else {
            child.push(item.menu_id)
        }
    })
    return child
}
rolequeryAll({
    limit: page.limit,
    offset: page.offset,
}).then(res => {
    let rows = res.data.role.map(item => {
        let arr = []
        let tree = transTree(item.menus, '')
        item.menus.forEach(element => {
            arr.push(element.menu_id)
        });
        item.menu_id = childnode(tree)
        return item
    });
    tableData.value = rows
    page.count = res.data.count
})

// console.log(tableData)

const edit = (data, type) => {
    console.log(data.row.user_id, type)
    // type 0 修改 1 删除
    if (type == 0) {
        xdialogRef.value.isformdata(data.row)
    }
    if (type == 1) {
        roledelete({
            role_id: data.row.role_id
        }).then(res => {
            console.log(res)
        })
    }
}
const current = (data) => {
    // console.log(data)
    page = data
    rolequeryAll({
        limit: page.limit,
        offset: page.offset,
    }).then(res => {
        // console.log(res.data.data)
        let rows = res.data.data.role.map(item => {
            let arr = []
            // 递归，只要子集节点的菜单id

            item.menu.forEach(element => {
                arr.push(item.menu_id)
            });
            item.menu_id = arr
            return item
        });
        tableData.value = rows
        page.count = res.data.data.count
        console.log(tableData)
    })
}
const xdialogRef = ref(null)
const addbtn = () => {
    console.log(xdialogRef.value)
    xdialogRef.value.isdialog()
}

// 添加用户数据
function formEmit(data, type) {
    if (type.value == 0) {
        console.log("添加")
        roleadd(data).then(res => {
            console.log(res)
        })
    } else {
        console.log("更新")
        roleupdata(data).then(res => {
            console.log(res)
        })
    }
}


</script>

<style lang="less" scoped>
.home {
    height: 100%;
}

.card {
    margin-bottom: 20px;
}

.table {
    // min-height: 100%;
    z-index: 1;
}
</style>